<template>
  <div class="tree">
    <tree-item
      :treeData="treeData"
      @change="change"
      @showMenu="showMenu"
      ref="treeItem"
    />
    <div
      class="contextmenu"
      v-show="isVisble"
      :style="{ left: left + 'px', top: top + 'px' }"
    >
      <menu-item
        @handleAdd="handleAdd"
        @handleDelete="handleDelete"
        @handleUpdate="handleUpdate"
      />
    </div>
  </div>
</template>

<script>
import TreeItem from "../components/treeItem";
import MenuItem from "../components/menuItem";

export default {
  name: "Tree",
  components: { TreeItem, MenuItem },
  created() {
    this.setDataFromStatus(this.treeData);
  },
  data() {
    return {
      isVisble: false, //是否显示自定义的右键
      left: 0,
      top: 0,
      item:null,
      index:0,
      treeData: [
        {
          pid: "0",
          id: "1-1",
          name: "大标题一",
          children: [
            {
              pid: "1-1",
              id: "1-1-1",
              name: "标题二a",
            },
            {
              pid: "1-1",
              id: "1-1-2",
              name: "标题二b",
            },
            {
              pid: "1-1",
              id: "1-1-3",
              name: "标题二c",
              children: [
                {
                  pid: "1-1-3",
                  id: "1-1-3-1",
                  name: "标题三",
                  children: [
                    {
                      pid: "1-1-3-1",
                      id: "1-1-3-1-1",
                      name: "标题四",
                      children: [
                        {
                          pid: "1-1-3-1-1",
                          id: "1-1-3-1-1-1",
                          name: "标题五",
                          children: [
                            {
                              pid: "1-1-3-1-1-1",
                              id: "1-1-3-1-1-1-1",
                              name: "标题五a",
                            },
                            {
                              pid: "1-1-3-1-1-1",
                              id: "1-1-3-1-1-1-2",
                              name: "标题五b",
                            },
                          ],
                        },
                      ],
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          pid: "0",
          id: "1-2",
          name: "大标题二",
        },
      ],
    };
  },
  watch: {
    isVisble(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    },
  },
  methods: {
    // 给数据上面的每一个节点都添加一个状态 是否展开的状态
    setDataFromStatus(arr) {
      arr.map((item) => {
        // 添加数据属性
        this.$set(item, "isShow", false); //是否显示
        this.$set(item, "check", false); //是否选中
        this.$set(item, "status", false); //是否可以展开
        if (item.children) this.setDataFromStatus(item.children);
      });
    },
    // 取消其他的选择项
    itemCheck(arr, val) {
      arr.map((value) => {
        value.check = false;
        if (value.children) {
          this.itemCheck(value.children, val);
        }
      });
    },
    change(val) {
      this.itemCheck(this.treeData, val);
    },
    // 显示自定义的右键
    showMenu(e, item, index) {
      this.left = e.pageX;
      this.top = e.pageY;
      this.item = item;
      this.index = index;
      this.isVisble = true;
    },
    handleAdd() {
      this.$refs.treeItem.handleAdd(this.item);
    },
    handleDelete() {
      this.$refs.treeItem.handleDelete(this.item,this.index);
    },
    handleUpdate() {
      this.$refs.treeItem.handleUpdate();
    },
    closeMenu() {
      this.isVisble = false;
    },
  },
};
</script>
<style>
.tree {
  height: 500px;
  width: 500px;
}
</style>
